<template>
    <div>
        <template v-for="(item, index) in province">
            <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll"
                @change="val=>handleCheckAllChange(val,item)">
                {{item.name}}
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="(city, index) in item.cities" :label="city.id" :key="city.id">{{city.name}}
                </el-checkbox>
            </el-checkbox-group>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'RbacProjectUiChecktest',

        data() {
            return {
                province: [
                    {
                        id: 1,
                        name: "北京市",
                        isIndeterminate: true,
                        checkAll: false,
                        checkedCities: [2, 4],
                        cities: [
                            {
                                id: 2,
                                name: '海淀区'
                            },
                            {
                                id: 3,
                                name: '丰台区'
                            },
                            {
                                id: 4,
                                name: '朝阳区'
                            },
                            {
                                id: 5,
                                name: '西城区'
                            }
                        ]
                    },
                    {
                        id: 6,
                        name: "河北省",
                        isIndeterminate: true,
                        checkAll: false,
                        checkedCities: [7, 9],
                        cities: [
                            {
                                id: 7,
                                name: '石家庄市'
                            },
                            {
                                id: 8,
                                name: '保定市'
                            },
                            {
                                id: 9,
                                name: '张家口市'
                            },
                            {
                                id: 10,
                                name: '廊坊市'
                            }
                        ]
                    }
                ]
            };
        },

        mounted() {

        },
        methods: {
            handleCheckAllChange(val, item) {
                debugger
                let c=[];
                item.cities.forEach(element => {
                    c.push(element.id)
                });
                item.checkedCities = val ? c : [];
                item.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                // let checkedCount = value.length;
                // this.checkAll = checkedCount === this.cities.length;
                // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        },
    };
</script>